<template>
  <div class="cart">
    <div class="top">
      <div class="back" @click="back">
        <Icon type="ios-arrow-back" size="22" />
        <span>办公用品列表</span>
      </div>
      <div class="deleAll">
        <Button type="primary">全部删除</Button>
      </div>
    </div>

    <div class="bottom">
      <div class="left"></div>
      <div class="right">
        <div>
          总计：<span class="money">￥{{ carPrice }}</span>
        </div>
        <div style="display: flex">
          <div class="keyMoney">
            个人余额：￥{{ accountBalance }}
            <div class="instro"></div>
          </div>
          <div v-if="carPrice != 0" class="btnwrap" @click="buyHandler">
            <div class="btn">领取</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      carPrice: 0,
      busket: this.busket0,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
      busket0: (state) => state.busket,
      accountBalance: (state) => state.accountBalance,
      departBalance: (state) => state.departBalance,
    }),
  },
  watch: {
    busket0: {
      handler: function (val) {
        this.busket = val;
        this.initCarPrice();
      },
      deep: true,
    },
  },
  mounted() {
    this.initCarPrice();
  },
  methods: {
    buyHandler() {},
    initCarPrice() {
      console.log("计算总计", this.busket);
      let totalPrice = 0;
      let arr = [];
      this.busket0.forEach((item) => {
        if (item.selected) {
          totalPrice += item.choseGuige.price * item.goodsNumber;
          arr.push(item);
        }
      });
      this.$nextTick(() => {
        this.carPrice = totalPrice.toFixed(2);
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/public.less";
.cart {
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom:20px;
    .back {
      font-size: 14px;
      color: #333333;
      cursor: pointer;
      margin-bottom: 25px;
      display: flex;
      justify-items: center;
      &:hover {
        color: #2d8cf0;
      }
      .icon {
        padding-right: 5px;
      }
    }
    
  }
}
.bottom {
  z-index: 1000;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 26upx;
  color: #333;

  height: 70px;

  .left {
    width: 180px;
  }
  .right {
    border-top: 1px solid #e3e3e3;
    height: 100%;
    flex: 1;
    padding: 0 50px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .money {
    font-size: 18px;
    color: #ff4117;
    font-weight: bold;
  }
  .keyMoney {
    margin-left: 5px;
    display: flex;
    align-items: center;
  }
  .instro {
    margin-left: 5px;
    width: 14px;
    height: 14px;
    .bg-image("~@/assets/img/说明");
  }
  .btnwrap {
    margin-left: 30px;
    .btn {
      float: right;
      width: 100px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ff4117;
      border-radius: 32px;
      color: #fff;
    }
  }
}
</style>